<template>
  <div>
    <h2>用户反馈表单</h2>

    <!-- 姓名输入 -->
    <label for="name">姓名：</label>
    <input id="name" type="text" placeholder="请输入您的姓名" v-model="infoFome.name" />

    <!-- 反馈类型选择 -->
    <label for="feedback-type">反馈类型：</label>
    <select id="feedback-type" v-model="infoFome.fklx">
      <option value="">请选择反馈类型</option>
      <option value="投诉">投诉</option>
      <option value="建议">建议</option>
      <option value="其他">其他</option>
    </select>

    <!-- 反馈详情 -->
    <label for="details">反馈详情：</label>
    <textarea
      id="details"
      placeholder="请输入您的反馈内容"
      v-model="infoFome.fkxq"
      :maxlength="zfzs"
    ></textarea>
    <p>剩余字符：{{ zfzsjishuan }}</p>

    <!-- 邮件通知 -->
    <p>是否同意接受邮件通知？</p>
    <label>
      <input type="radio" name="email-notify" value="yes" v-model="infoFome.yjtz" /> 是
    </label>
    <label>
      <input type="radio" name="email-notify" value="no" v-model="infoFome.yjtz" /> 否
    </label>

    <!-- 提交按钮 -->
    <button @click.prevent="tjfk">提交反馈</button>

    <!-- 提交结果展示 -->
    <div v-show="showno">
      <h3>反馈详情</h3>
      <p>姓名：{{ obj?.name }}</p>
      <p>反馈类型：{{ obj?.fklx }}</p>
      <p>反馈内容：{{ obj?.fkxq }}</p>
      <p>是否同意接收通知：{{ obj?.yjtz === 'yes' ? '是' : '否' }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

interface InFo {
  name: string
  fklx: string
  fkxq: string
  yjtz: string
}

const infoFome = ref({
  name: '',
  fklx: '',
  fkxq: '',
  yjtz: ''
})
const showno = ref(false)
let obj = ref<InFo>()
const zfzs = ref(100)

const tjfk = () => {
  ;(obj.value = { ...infoFome.value }),
    (showno.value = true),
    (infoFome.value.name = ''),
    (infoFome.value.fklx = ''),
    (infoFome.value.fkxq = ''),
    (infoFome.value.yjtz = '')
}

const zfzsjishuan = computed(() => {
  return zfzs.value - infoFome.value.fkxq.length
})
</script>

<style lang="scss" scoped>
div {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type='text'],
select,
textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea {
  height: 100px;
  resize: none;
}

button {
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #218838;
}

p {
  margin-top: 0;
}

h3 {
  margin-top: 20px;
}

input[type='radio'] {
  margin-right: 5px;
}

.feedback-result {
  border-top: 1px solid #ccc;
  margin-top: 20px;
  padding-top: 20px;
}
</style>
